<template>
  <div class="chart-container" ref="chartContainer"></div>
</template>

<script>
import * as $echarts from "echarts";
export default {
  props: {
    // 中间标题
    middleTitle: {
      type: String,
      default: () => "",
    },
    // 配色方案
    pieColor: {
      type: Array,
      default: () => [
        "#0263FF",
        "#FF7723",
        "#8E30FF",
        "#1BBCB0",
        "#FFB03E",
        "#F56C6C",
      ],
    },
    // 数据
    seriesData: {
      type: Array,
      default: () => [
        { value: 40, name: "1年以内" },
        { value: 38, name: "1-5年" },
        { value: 32, name: "6-10年" },
        { value: 30, name: "11-15年" },
        { value: 28, name: "16-20年" },
        { value: 26, name: "20年以上" },
      ],
    },
  },
  data() {
    return {};
  },
  mounted() {
    this.runChart();
  },
  methods: {
    runChart() {
      let myChart = $echarts.init(this.$refs.chartContainer);
      myChart.setOption({
        color: this.pieColor,
        title: this.middleTitle
          ? {
              text: `${this.middleTitle.slice(0, 2)}\n${this.middleTitle.slice(
                2
              )}`,
              top: "middle",
              left: "center",
              textStyle: {
                color: "#5E6E88",
                fontSize: 15,
              },
            }
          : {},
        tooltip: {
          trigger: "item",
          formatter: "{b}<br/>数量: {c}<br/> 占比：{d}%",
          backgroundColor: "rgba(24, 64, 114, 0.8)",
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["50", "100"],
            center: ["50%", "50%"],
            roseType: "area",
            label: {
              color: "#5E6E88",
              //   formatter: "{b}\n{d}%",
              formatter: "{b}",
              overflow: "none",
              //   padding: [0, 0],
              padding: [20, -30, 0, -30],
            },
            labelLine: {
              show: false,
              length: 5,
              length2: 30,
              lineStyle: {
                color: "#ABC1D1",
              },
            },
            labelLayout: {
              dy: -4,
              verticalAlign: "bottom",
            },
            data: this.seriesData,
          },
        ],
      });
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.chart-container {
  width: 100%;
  height: 100%;
}
</style>
